<template>
    <div id="login">
        <button @click="show = !show">
            Toggle render
        </button>
        <transition name="custom-classes-transition" enter-active-class="animated fadeInRight" leave-active-class="animated fadeOutRight">
            <div v-if="show" key="true">
                <el-button type="primary" @click="dialogLoginFormVisible = true">登录</el-button>
                <el-button @click="dialogRegisterFormVisible = true">注册</el-button>
            </div>
            <div v-else key="false">
                <el-button @click="logout()">注销</el-button>
            </div>
        </transition>
        <!-- Form -->
    
        <el-dialog title="登录" v-model="dialogLoginFormVisible" show-close=true size="tiny">
            <el-form :model="loginForm" :rules="rules" :label-position="labelPosition" ref="loginForm" label-width="100px">
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="loginForm.username"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="loginPassword">
                    <el-input type="password" v-model="loginForm.loginPassword"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitLoginForm('loginForm')">确 定</el-button>
            </div>
        </el-dialog>
    
        <el-dialog title="注册" v-model="dialogRegisterFormVisible" show-close=true size="tiny">
            <el-form :model="registerForm" :rules="rules" :label-position="labelPosition" ref="registerForm" label-width="100px">
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="registerForm.username"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input type="password" v-model="registerForm.password"></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="checkPass">
                    <el-input type="password" v-model="registerForm.checkPass" auto-complete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogRegisterFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitRegisterForm('registerForm')">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: 'app',
    data() {
        var validatePass = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入密码'));
            } else {
                if (this.registerForm.checkPass !== '') {
                    this.$refs.registerForm.validateField('checkPass');
                }
                callback();
            }
        };
        var validatePass2 = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请再次输入密码'));
            } else if (value !== this.registerForm.password) {
                callback(new Error('两次输入密码不一致!'));
            } else {
                callback();
            }
        };
        return {
            show: true,
            labelPosition: 'left',
            dialogRegisterFormVisible: false,
            dialogLoginFormVisible: false,
            loginForm: {
                username: '',
                loginPassword: ''
            },
            registerForm: {
                username: '',
                password: '',
                checkPass: '',
            },
            rules: {
                username: [{
                    required: true,
                    message: '请输入用户名',
                    trigger: 'blur'
                },
                {
                    min: 8,
                    max: 20,
                    message: '长度在 8 到 20 个字符',
                    trigger: 'blur'
                }
                ],
                loginPassword: [{
                    required: true,
                    message: '请输入密码',
                    trigger: 'blur'
                },
                {
                    min: 8,
                    max: 20,
                    message: '长度在 8 到 20 个字符',
                    trigger: 'blur'
                }
                ],
                password: [{
                    required: true,
                    validator: validatePass,
                    trigger: 'blur'
                }],
                checkPass: [{
                    required: true,
                    validator: validatePass2,
                    trigger: 'blur'
                }]
            }
        };
    },
    methods: {
        submitRegisterForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    var formData = JSON.stringify(this.registerForm); // 这里才是你的表单数据
                    this.$http.post('http://localhost:8088/register', formData).then((response) => {
                        if (response.body.info == "1") {
                            this.dialogRegisterFormVisible = false;
                            this.$message({
                                message: '恭喜你，这是一条成功消息',
                                type: 'success'
                            });
                            this.show = false;
                            sessionStorage.jwt = response.body.jwt;
                        }
                    }, (response) => {
                        console.log("error");
                        // error callback
                    });
                } else {
                    return false;
                }
            });
        },
        submitLoginForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    var formData = JSON.stringify(this.loginForm); // 这里才是你的表单数据
                    this.$http.post('http://localhost:8088/login', formData).then((response) => {
                        if (response.body.info == "1") {
                            this.dialogLoginFormVisible = false;
                            this.$message({
                                message: '恭喜你，这是一条成功消息',
                                type: 'success'
                            });
                            sessionStorage.jwt = response.body.jwt;
                            this.show = false;
                        }
                    }, (response) => {
                        console.log("error");
                        // error callback
                    });
                } else {
                    return false;
                }
            });
        },
        logout() {
            this.$http.get('http://localhost:8088/logout').then((response) => {
                if (response.body.info == "1") {
                    this.$message({
                        message: '恭喜你，这是一条成功消息',
                        type: 'success'
                    });
                    sessionStorage.removeItem("jwt");
                    this.show = true;
                }
            }, (response) => {
                console.log("error");
                // error callback
            });
        }
    }
}
</script>

<style>

</style>
